<template>
	<view>
		<view class="login-bg">
			<image class="login-bg-img" src="../../static/login/login_bg.png" mode="widthFix"></image>

			<view class="login-bg-login">
				<image src="../../static/login/login_logo.png" mode="widthFix"></image>
				<view>欢迎来到狐狸尾巴</view>
			</view>
		</view>

		<view class="login-from">
			<view class="from-item top">
				<view class="icon iconfont icon-iphone1"></view>
				<input type="number" maxlength="11" minlength="11" v-model="loginFrom.phone" placeholder="请在此处输入手机号" />
			</view>
			<view class="from-item">
				<view class="icon iconfont icon-renzhengdunpaianquanbaozhangzhibao"></view>
				<input class="vcode" maxlength="6" minlength="6" type="text" v-model="loginFrom.code" placeholder="输入验证码" />
				<view @tap="sendCode" class="send-button" :class="[code.stats ? 'sended' : '']">{{ !code.stats ? '发送' : code.time + 's' }}</view>
			</view>
			<view class="from-submit" @tap="toLogin">登录</view>
			<view class="notic">未注册的手机号验证后自动创建狐狸尾巴账号</view>
			<view class="treaty">
				登录即同意
				<text @tap="seeTreaty">平台用户协议</text>
			</view>
		</view>

		<uni-popup ref="popupEula" :maskClick="false" type="center">
			<view class="pop-eula">
				<eula></eula>
				<view class="button-group">
					<view class="button default" @tap="eulaClose">暂时不用</view>
					<view class="button confirm" @tap="eulaConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import eula from '../../components/reg/eula.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
import permision from '@/js_sdk/wa-permission/permission.js';
export default {
	components: {
		eula
	},
	data() {
		return {
			userExits: false,
			code: {
				stats: false,
				time: 60
			},
			loginFrom: {
				phone: '17717332778',
				code: '',
				latitude: 0,
				longitude: 0,
				city: ''
			},
			treatyUrl: '',
			errMsg: '',
			deviceInfo: {
				deviceId: '',
				platform: '',
				system: ''
			}
		};
	},
	methods: {
		checkLocation() {
			let bool = permision.checkSystemEnableLocation();
			if (bool === false) {
				uni.showModal({
					title: '提示',
					content: '请打开定位服务',
					success: ({ confirm, cancel }) => {
						if (confirm) {
							permision.gotoAppPermissionSetting();
						}
					}
				});
			}else{
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						this.loginFrom.latitude = res.latitude;
						this.loginFrom.longitude = res.longitude;
						this.loginFrom.city = res.address.city;
					},
					error: res => {
						console.log(res);
					}
				});
			}
			return bool;
		},
		countDown() {
			this.code.stats = true;
			this.code.time = this.code.time - 1;
			let sendCodeStat = setInterval(() => {
				if (this.code.time > 0) {
					this.code.time = this.code.time - 1;
				} else {
					this.code.time = 60;
					this.code.stats = false;
					clearInterval(sendCodeStat);
				}
			}, 1000);
		},
		sendCode() {
			if (this.code.stats) {
				return;
			}
			let reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[0-9])\d{8}$/;
			if (!reg.test(this.loginFrom.phone)) {
				showToast('手机号不符合规则');
			} else {
				uni.request({
					url: constant.baseHttpUri + constant.pathUri.smSend,
					data: {
						userName: this.loginFrom.phone,
						deviceId: this.deviceInfo.deviceId,
						templateCode: 'Register'
					},
					header: constant.json,
					method: 'POST',
					success: res => {
						if (res.data.code === constant.dataCode.OK) {
							if (res.data.data !== 'Register') {
								this.userExits = true;
							}
							this.countDown();
							showToast('验证码发送成功');
						} else {
							showToast(res.data.msg);
						}
					}
				});
			}
		},
		toLogin() {
			if (!this.userExits && !uni.getStorageSync(constant.user)) {
				this.$refs.popupEula.open();
			} else {
				this.login();
			}
		},
		login() {
			if (!this.loginFrom.code) {
				showToast('请输入验证码');
				return;
			}
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.login,
				data: {
					userPhone: this.loginFrom.phone,
					userCity: this.loginFrom.city,
					longitude: this.loginFrom.longitude,
					latitude: this.loginFrom.latitude,
					code: this.loginFrom.code,
					versionCode: 1,
					osType: this.deviceInfo.system === 'ios' ? 2 : 1,
					deviceId: this.deviceInfo.deviceId
				},
				header: constant.json,
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						uni.setStorageSync(constant.user, res.data.data);
						uni.setStorageSync(constant.auth, res.header.Authorization);
						showToast('登录成功');
						if (!res.data.data.userSex) {
							uni.navigateTo({
								url: '../user-gender/user-gender'
							});
						} else {
							uni.switchTab({
								url: '../index/index'
							});
						}
						uni.setStorageSync(constant.first, 1);
						constant.initCustomer();
					} else {
						showToast(res.data.msg);
					}
				}
			});
		},
		eulaClose() {
			this.$refs.popupEula.close();
			plus.runtime.quit();
		},
		eulaConfirm() {
			this.$refs.popupEula.close();
			if(this.checkLocation()){
				this.login();
			}
		},
		seeTreaty() {
			uni.navigateTo({
				url: '../xwebview/xwebview?url=https://www.huazhu91.com/userProtocol.html'
			});
		}
	},
	onLoad() {
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: res => {
				this.loginFrom.latitude = res.latitude;
				this.loginFrom.longitude = res.longitude;
				this.loginFrom.city = res.address.city;
			},
			error: res => {
				console.log(res);
			}
		});

		uni.getSystemInfo({
			success: res => {
				this.deviceInfo.deviceId = plus.push.getClientInfo().clientid;
				this.deviceInfo.platform = res.platform;
				this.deviceInfo.system = res.system;
			}
		});
	},
	onBackPress(options) {
		// return true 表示禁止默认返回
		return true;
	}
};
</script>

<style lang="less" scoped>
.login-bg {
	width: 100%;
	position: relative;
	.login-bg-img {
		width: 100%;
	}
	.login-bg-login {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 180rpx;
		}
		view {
			font-size: 40rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
.login-from {
	position: relative;
	width: 80%;
	background-color: #ffffff;
	box-shadow: 0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 40px;
	margin-top: -40rpx;
	z-index: 99;

	.from-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx 40rpx 0;
		background: #f9f9f9;
		border-radius: 30rpx;

		.icon-iphone1::before {
			margin: 0 20rpx;
			font-size: 60rpx;
			color: #999999;
		}
		.icon-renzhengdunpaianquanbaozhangzhibao {
			padding: 15rpx 0 20rpx;
		}
		.icon-renzhengdunpaianquanbaozhangzhibao::before {
			margin: 0 20rpx;
			padding: 10rpx;
			font-size: 40rpx;
			color: #999999;
		}
		input {
			padding-left: 30rpx;
			border-left: 1px solid #999999;
			color: #606660;
		}

		.vcode {
			width: 230rpx;
		}
		.send-button {
			text-align: center;
			width: 120rpx;
			height: 70rpx;
			font-size: 34rpx;
			line-height: 70rpx;
			margin-right: 20rpx;
			color: #ffffff;
			border-radius: 18rpx;
			background-color: #fc80a4;
		}
		.sended {
			background-color: #cccccc;
		}
	}
	.top {
		margin-top: 100rpx;
	}
	.from-submit {
		width: 80%;
		border-top: 1rpx solid transparent;
		margin: 50rpx 40rpx 30rpx;
		background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 40rpx;
		font-size: 38rpx;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
	}
	.notic {
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;
		margin-bottom: 10rpx;
	}
	.treaty {
		font-size: 22rpx;
		color: #999999;
		margin-bottom: 100rpx;
		text {
			color: #3265f9;
			margin-left: 10rpx;
			font-size: 22rpx;
		}
	}
}
.pop-eula {
	z-index: 999;
	background-color: #ffffff;
	margin: 0 40rpx;
	padding: 0 40rpx;
	border-radius: 30rpx;
	border-bottom: 1rpx solid transparent;
	.button-group {
		border-top: 1rpx solid transparent;
		margin: 10rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.button {
			text-align: center;
			width: 270rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: red;
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 500;
			border-radius: 18rpx;
		}
		.default {
			background-color: #c9c9c9;
		}
		.confirm {
			background-color: #fd86a7;
		}
	}
}
</style>
